<template>
    <div class="my-header">
        <div class="flex align-center">
            <img height="40px" src="../../assets/images/logo.png" alt="" />
            <h1 class="margin-l-20">内部质量诊断与改进信息平台</h1>
        </div>

        <ul class="menu">
            <li
                :class="`${activeIndex == item.id ? 'active' : ''}`"
                v-for="(item, index) in menuList"
                class="pt-20"
                :key="index"
                @click="changeMenu(item)"
            >
                {{ item.name }}
            </li>
        </ul>

        <div class="flex t-right">
            <span class="font-bold">{{ userInfo.realName }}</span>
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    <i class="el-icon-s-custom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="dialogVisible = true"
                        >修改密码</el-dropdown-item
                    >
                </el-dropdown-menu>
            </el-dropdown>
            <span class="line">|</span>
            <a class="ml-30" :href="`${baseURL}/logout`">
                <i class="el-icon-switch-button"></i>
            </a>
        </div>

        <el-dialog
            title="修改密码"
            :visible.sync="dialogVisible"
            width="30%"
            :close-on-click-modal="false"
            :before-close="closePwd"
        >
            <div>
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="旧密码" prop="oldPwd">
                        <el-input
                            v-model="ruleForm.oldPwd"
                            show-password
                            placeholder="请输入旧密码"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd">
                        <el-input
                            v-model="ruleForm.newPwd"
                            show-password
                            placeholder="请输入新密码"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="newPwd2">
                        <el-input
                            v-model="ruleForm.newPwd2"
                            show-password
                            placeholder="请再次输入密码"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closePwd">取 消</el-button>
                <el-button type="primary" @click="submitPwd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import bus from '@/config/bus';
import { getStorage } from '../../config/utils';
import { editPwd, logout } from '../../api/system';
import { mapGetters } from 'vuex';

export default {
    name: 'index',
    props: {
        menuList: {
            type: Array
        }
    },
    beforeCreate () {
        if (this.$route.name === '诊改驾驶舱') {
            this.$emit('changeActive', true);
        } else {
            this.$emit('changeActive', false);
        }
    },
    created () {},
    mounted () {},
    /*   created() {
    // this.$store.dispatch('SET_ACTIVE_INDEX', sessionStorage.getItem('activeIndex'))
    this.$store.commit('SET_ACTIVE_INDEX', sessionStorage.getItem('activeIndex'))
    console.log(sessionStorage.getItem('activeIndex'))
  }, */
    computed: {
        userInfo () {
            return getStorage('userInfo');
        },
        activeIndex () {
            // return sessionStorage.getItem('activeIndex')
            return this.$store.getters.activeIndex;
        }
    },
    data () {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.newPwd) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            avatarUrl:
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            baseURL: this.baseURL,
            activeUrl: '',
            dialogVisible: false,
            ruleForm: {
                oldPwd: '',
                newPwd: '',
                newPwd2: ''
            },
            rules: {
                oldPwd: [
                    {
                        required: true,
                        message: '请输入旧密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        max: 20,
                        message: '长度在  到 20 个字符',
                        trigger: 'blur'
                    }
                ],
                newPwd: [
                    {
                        required: true,
                        message: '请输入新密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        max: 20,
                        message: '长度在  到 20 个字符',
                        trigger: 'blur'
                    }
                ],
                newPwd2: [
                    {
                        required: true,
                        message: '请输入确认新密码',
                        trigger: 'blur'
                    },
                    { validator: validatePass, trigger: 'blur' },
                    {
                        min: 6,
                        max: 20,
                        message: '长度在  到 20 个字符',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    methods: {
        // 折叠、展开左侧菜单
        handleMenu () {
            bus.$emit('isCollapse');
        },
        // 前端退出登录
        loginOut () {
            sessionStorage.clear();
            this.$router.replace('/login');
            window.location.reload();
        },
        // 切换菜单
        changeMenu (item) {
            console.log(item, 'item');
            if (item.name === '诊改驾驶舱') {
                const el = document.getElementsByClassName('mainContent')[0];
                el.style.background = 'none';
                this.$emit('changeActive', true);
            } else {
                this.$emit('changeActive', false);
            }
            // 存储当前选中的菜单
            this.$store.dispatch('SET_ACTIVE_INDEX', item.id);

            // 设置左侧菜单
            this.$store.dispatch('SET_TREE_MENU', item.children);

            // 切换后跳转到第一个菜单
            this.getFirstUrl(item);
        },
        getFirstUrl (data) {
            if (data.children && data.children.length) {
                this.getFirstUrl(data.children[0]);
            } else {
                if (data.resUrl && data.resUrl.indexOf('http') > -1) {
                    this.$router.push({
                        path: '/portrait',
                        query: {
                            url: data.resUrl
                        }
                    });
                } else {
                    this.$router.push({
                        path: data.resUrl,
                        query: {
                            name: data.name
                        }
                    });
                }
            }
        },
        // 修改密码
        submitPwd () {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    const params = {
                        newPassword: this.ruleForm.newPwd,
                        oldPassword: this.ruleForm.oldPwd
                    };
                    editPwd(params)
                        .then(res => {
                            this.$message.success('修改成功，退出后生效！');
                        })
                        .catch(() => {});
                } else {
                    return false;
                }
            });
        },
        // 关闭修改密码
        closePwd () {
            this.dialogVisible = false;
            this.$refs.ruleForm.resetFields();
        }
    }
};
</script>

<style lang="scss" scoped>
.my-header {
    @include flex();
    width: 100%;
    height: 100%;
    i {
        cursor: pointer;
        font-size: 22px;
        margin-top: 2px;
        color: #fff;
    }
    .menu {
        display: flex;
        height: 100%;
        margin-left: 125px;
        li {
            box-sizing: border-box;
            height: 70% !important;
            display: flex;
            justify-content: center;
            width: 120px;
            height: 100%;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            color: #006fae;
        }
    }
    .t-right {
        height: 50px;
        align-items: center;
        margin-bottom: 25px;
        .el-dropdown {
            margin-right: 30px;
            margin-left: 10px;
        }
        .line {
            display: inline-block;
            font-size: 19px;
            font-weight: 300;
        }
    }
}

/deep/ .el-dropdown-menu {
    .el-dropdown-menu__item a {
        text-decoration: unset;
        color: #333;
        &:hover {
            color: #4aa2ff;
        }
    }
}

.el-dropdown-link {
    color: white;
}
.active {
    background: url("../../assets/images/light-circle.png") no-repeat;
    color: #fff !important;
    font-size: 20px;
    font-weight: 800 !important;
    background-size: cover;
}
::v-deep .el-dropdown-menu__item {
    background: #fff !important;
}
</style>
